<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>后台管理-申请试用</title>
		<link rel="stylesheet" href="/resources/src/css/lib/bootstrap.min.css">
		<link rel="stylesheet" href="/resources/src/css/admin/main.css" />
		<link rel="stylesheet" href="/resources/src/css/admin/user-manage.css" />
    </head>
    <body>
		<article class="main">
			<div class="main-wrapper">
				<section class="content">
				<form id="myForm" action="/admin/agency/applyList">
					<div class="container">
						<div class="con-body">
							<div class="toolbar clearfix">
								<!-- <div class="toolbar-left toolbar-one pull-left">
									<a href="#" id="checkout" class="pull-left">导出</a>
								</div> -->
								<div class="toolbar-right pull-left">
									<div class="input-icon">
										<input type="hidden" name="orderValue" id="orderValue" value="${agency.orderValue }"/>
										<input type="hidden" name="orderType" id="orderType" value="${agency.orderType }"/>
										<input type="text" id="search" placeholder="输入用户名/手机/邮箱查询"/>
										<i class="iconfont icon-sousuo" id="search-btn"></i>
									</div>
								</div>
							</div>
							<div class="user-table table-responsive">
								<table class="table">
									<thead>
										<tr>
											<th>机构名</th>
											<th>联系人电话</th>
											<th>联系人姓名</th>
											<th>申请时间<i id="applyTime" class="iconfont icon-paixu" data-order="0"></i></th>
											<th data-toggle="joDropdown">
												处理进度<i class="iconfont icon-caidanshaixuan"></i>
												<ul data-toggle="joMenu">
													<li><a href="javascript:void(0);" onclick="statusSort(0);">全部</a></li>
													<li><a href="javascript:void(0);" onclick="statusSort(1);">未处理</a></li>
													<li><a href="javascript:void(0);" onclick="statusSort(2);">已接触</a></li>
													<li><a href="javascript:void(0);" onclick="statusSort(3);">对方考虑中</a></li>
													<li><a href="javascript:void(0);" onclick="statusSort(4);">考虑后不试用</a></li>
													<li><a href="javascript:void(0);" onclick="statusSort(5);">已开通账号</a></li>
												</ul>
											</th>
											<th data-toggle="joDropdown">
												备注<i class="iconfont icon-caidanshaixuan"></i>
												<!-- <ul data-toggle="joMenu">
													<li><a href="">全部</a></li>
													<li><a href="">有</a></li>
													<li><a href="">无</a></li>
												</ul> -->
											</th>
										</tr>
									</thead>
									<tbody  id="mytable">
									<c:forEach items="${pages.result }" var="page">
										<tr data-userId="255">
											<td>${page.agencyName }</td>
											<td>${page.phone }</td>
											<td>${page.contactsName }</td>
											<td>${page.createTime }</td>
											<td>
											<c:choose>
												<c:when test="${page.status ==1}">
												未处理
												</c:when>
												<c:when test="${page.status ==2 }">
												已接触
												</c:when>
												<c:when test="${page.status ==3 }">
												对方考虑中
												</c:when>
												<c:when test="${page.status ==4 }">
												考虑后不使用
												</c:when>
												<c:when test="${page.status ==5 }">
												已开通账号
												</c:when>
											</c:choose>
											</td>
											<td>
												<a href="/admin/agency/remarkList/${page.id }">查看</a>
											<a class="addRemark" value="${page.id }">添加</a></td>
										</tr>
									</c:forEach>
									<tr>
										<td colspan="6"  style="border:0"><jsp:include page="/common/adminPage.jsp" /></td>
										</tr>
									</tbody>
								</table>		
							</div>
						</div>
					</div>
					</form>
				</section>
			</div>
		</article>
		
		<!-- 添加备注模态框 -->
		<div class="joModal" id="remark-modal" data-liffect="fadeIn">
			<div class="joModal-dialog">
				<input type="hidden" id="aid" value=''/>
				<div class="joModal-content" data-liffect="slideTop" style="width:554px; height:285px;">
					<div class="joModal-header">
						<h1 class="title">添加备注</h1>
					</div>
					<div class="joModal-body">
						<div style="width:534px;height:148px;margin-top:10px; margin-left:auto; margin-right:auto;padding:10px 15px; box-sizing:border-box;background-color:#f2f2f2;">
							<textarea id="remark" name="remark" maxlength="200" style="width:100%; height:100%;resize: none;border:0;outline:0;line-height:150%;overflow:hidden;text-align:justify;background-color:transparent;"></textarea>
						</div>
					</div>
					<div class="joModal-footer clearfix" style="padding-top:20px;">
						<a class="pull-left cancel modal-btn" data-modal="close" style="margin-left:138px;">取消</a>
						<a class="pull-left confirm modal-btn" id="addRemark">确定</a>
					</div>
				</div>
			</div>	
		</div>
		
		<script src="/resources/src/js/jquery-2.1.4.js"></script>
		<script src="/resources/src/js/jquery.nicescroll.js"></script>
		<script src="/resources/src/js/admin/main.js"></script>
		<script src="/resources/src/js/adminPage.js"></script>
		<script>
			$(function(){
				
				$(".addRemark").on("click",function(){
					Global.modal("#remark-modal","show");
					$("#aid").val($(this).attr("value"));
				});
				$("#addRemark").on("click",function(){
					var aid = $("#aid").val();
					var remark = $("#remark").val();
					$.ajax({
		 				type:"post",
		 				url:"/admin/agency/saveAgencyRemark",
		 				async:true,
		 				data:{"applyId":aid,"remark":remark},
		 				dataType:'json',
		 				success:function(data){
		 					alert(data.data);
		 					Global.modal("#remark-modal","show");
		 				}
					});
				});
				
				document.onkeydown = function(e){ 
	        	    var ev = document.all ? window.event : e;
	        	    if(ev.keyCode==13) {
	        	    	var value=$("#search").val().trim();
				 		if(value!="" && value!=null){
				 			$.ajax({
				 				type:"post",
				 				url:"/admin/agency/applyListAjax",
				 				async:true,
				 				data:{"agencyName":value},
				 				success:function(data){
				 					$("#mytable").html(data);
				 				}
				 			})
				 		}
	        	     }
	        	}
			
				//搜索
			 	$("#search-btn").on("click",function(){
			 		var value=$("#search").val().trim();
			 		if(value!="" && value!=null){
			 			$.ajax({
			 				type:"post",
			 				url:"/admin/agency/applyListAjax",
			 				async:true,
			 				data:{"agencyName":value},
			 				success:function(data){
			 					$("#mytable").html(data);
			 				}
			 			})
			 		}
			 	});
			 	
			 	//以申请时间排列,order为0时执行升序排列，为1时执行降序排列
			 	$("#applyTime").on("click",function(){
			 		var order=$(this).attr("data-order");
			 		var value=$("#search").val().trim();
			 		if(order==="0"){
			 			//升序
			 			$(this).attr("data-order","1");
			 			orderSort(value,"createTime",2);
			 		}else{
			 			//降序
			 			$(this).attr("data-order","0");
			 			orderSort(value,"createTime",1);
			 		}
			 	});
			 	
			 	$("#applyTime").on("click",function(){
			 		var order=$(this).attr("data-order");
			 		var value=$("#search").val().trim();
			 		if(order==="0"){
			 			//升序
			 			$(this).attr("data-order","1");
			 			orderSort(value,"createTime",2);
			 		}else{
			 			//降序
			 			$(this).attr("data-order","0");
			 			orderSort(value,"createTime",1);
			 		}
			 	});
			 	
			 	function orderSort(value, orderValue, orderType){
		 			$.ajax({
		 				type:"post",
		 				url:"/admin/agency/applyListAjax",
		 				async:true,
		 				data:{"agencyName":value, "orderValue":orderValue, "orderType":orderType},
		 				success:function(data){
		 					$("#mytable").html(data)
		 				}
		 			})
			 	}
	
			});
			
			function statusSort(type){
				var orderValue = $("#orderValue").val();
				var orderType = $("#orderType").val();
				var search = $("#search").val();
				$.ajax({
	 				type:"post",
	 				url:"/admin/agency/applyListAjax",
	 				async:true,
	 				data:{"agencyName":search, "orderValue":orderValue, "orderType":orderType},
	 				success:function(data){
	 					$("#mytable").html(data)
	 				}
	 			})
			}
		</script>
		
 	</body>
</html>